<template>
    <el-menu
            class="menu"
            :router="true"
            ref="menu"
            background-color="#2e2e2e"
            text-color="#fff"
            active-text-color="yellow"
            unique-opened
            :collapse="isCollapsed">

        <!--<el-submenu index="sale"-->
                    <!--v-if="urlAvailible(['/sale-approval','/info-collect','/my-sale-approval','/approve-sale-approval','/sale-follow','/my-contract','/unit-quotation','/part-quotation','/sales-order'])">-->
            <!--<template slot="title">-->
                <!--<i class="el-icon-goods"></i>-->
                <!--<span slot="title">Sales</span>-->
            <!--</template>-->

            <!--<el-menu-item index="/info-collect" v-if="urlAvailible('/info-collect')">Visiting Abstract</el-menu-item>-->

            <!--<el-submenu index="1-2" v-show="urlAvailible(['/sale-approval','/my-sale-approval','/approve-sale-approval'])" ref="approval">-->
                <!--<template slot="title">-->
                    <!--<span slot="title">Approval</span>-->
                <!--</template>-->
                <!--<el-menu-item index="/sale-approval" v-if="urlAvailible('/sale-approval')">Sale Approval Quest</el-menu-item>-->
                <!--<el-menu-item index="/my-sale-approval" v-if="urlAvailible('/my-sale-approval')">My Quest</el-menu-item>-->
                <!--<el-menu-item index="/approve-sale-approval" v-if="urlAvailible('/approve-sale-approval')">My Approval</el-menu-item>-->
            <!--</el-submenu>-->

            <!--<el-submenu index="1-4"-->
                        <!--v-show="urlAvailible(['/unit-quotation','/part-quotation'])"-->
                        <!--ref="quotation">-->
                <!--<template slot="title">-->
                    <!--<span slot="title">Quotation</span>-->
                <!--</template>-->
                <!--<el-menu-item index="/unit-quotation" v-if="urlAvailible('/unit-quotation')">Unit Quotation</el-menu-item>-->
                <!--<el-menu-item index="/part-quotation" v-if="urlAvailible('/part-quotation')">Part Quotation</el-menu-item>-->
            <!--</el-submenu>-->

            <!--<el-submenu index="1-5" v-show="urlAvailible(['/sales-order'])" ref="salesOrder">-->
                <!--<template slot="title">-->
                    <!--<span slot="title">Sales Order</span>-->
                <!--</template>-->
                <!--<el-menu-item index="/sales-order" v-if="urlAvailible('/sales-order')">Sales Order</el-menu-item>-->
            <!--</el-submenu>-->

            <!--<el-submenu index="1-3" v-show="urlAvailible(['/sale-follow','/my-contract'])" ref="contract">-->
                <!--<template slot="title">-->
                    <!--<span slot="title">Contract</span>-->
                <!--</template>-->
                <!--<el-menu-item index="/sale-follow" v-if="urlAvailible('/sale-follow')">Sale Contract</el-menu-item>-->
                <!--<el-menu-item index="/my-contract" v-if="urlAvailible('/my-contract')">My Sale Contract</el-menu-item>-->
            <!--</el-submenu>-->

            <!--<el-menu-item index="/sale-statistics" v-if="urlAvailible('/sale-statistics')">Sale Statistics</el-menu-item>-->
        <!--</el-submenu>-->

        <el-submenu index="customer" v-if="urlAvailible(['/customer-request','/customer-approve'])">
            <template slot="title">
                <i class="el-icon-document"/>
                <span slot="title">Customer Request</span>
            </template>
            <el-menu-item index="/customer-request" v-if="urlAvailible('/customer-request')">Part Request</el-menu-item>
            <el-menu-item index="/customer-approve" v-if="urlAvailible('/customer-approve')">Request Check</el-menu-item>
        </el-submenu>

        <!--<el-submenu index="purchase" v-if="urlAvailible(['/purchase-request','/purchase-approve','/request-purchase','/purchase-order','/vendor'])">-->
            <!--<template slot="title">-->
                <!--<i class="el-icon-sold-out"></i>-->
                <!--<span slot="title">Purchase</span>-->
            <!--</template>-->
            <!--<el-submenu index="2-1">-->
                <!--<template slot="title">-->
                    <!--<span slot="title">Sparepart</span>-->
                <!--</template>-->
                <!--<el-menu-item index="/purchase-request" v-if="urlAvailible('/purchase-request')">Spareparts Request</el-menu-item>-->
                <!--<el-menu-item index="/purchase-approve" v-if="urlAvailible('/purchase-approve')">Request Approve</el-menu-item>-->
                <!--<el-menu-item index="/request-purchase" v-if="urlAvailible('/request-purchase')">Purchase Request</el-menu-item>-->
                <!--<el-menu-item index="/purchase-order" v-if="urlAvailible('/purchase-order')">Purchase Order</el-menu-item>-->
            <!--</el-submenu>-->
            <!--<el-menu-item index="/vendor" v-if="urlAvailible('/vendor')">Vendor Manage</el-menu-item>-->
        <!--</el-submenu>-->

        <el-submenu index="service" v-if="urlAvailible(['/quest','/work-order','/close-order','/service-report','/service-report1','/service-equipment','/service-project','/point-code','/cost'])">
            <template slot="title">
                <i class="el-icon-document"/>
                <span slot="title">TID Service</span>
            </template>
            <el-menu-item index="/quest" v-if="urlAvailible('/quest')">Service request</el-menu-item>
            <el-menu-item index="/work-order" v-if="urlAvailible('/work-order')">Work Order</el-menu-item>
            <el-menu-item index="/close-order" v-if="urlAvailible('/close-order')">Close Order</el-menu-item>
            <el-menu-item index="/service-report" v-if="urlAvailible('/service-report')">Part Report</el-menu-item>
            <el-menu-item index="/service-report1" v-if="urlAvailible('/service-report1')">Service Report</el-menu-item>
            <el-menu-item index="/service-equipment" v-if="urlAvailible('/service-equipment')">Unit</el-menu-item>
            <el-menu-item index="/service-project" v-if="urlAvailible('/service-project')">Project</el-menu-item>
            <el-menu-item index="/point-code" v-if="urlAvailible('/point-code')">Point Code</el-menu-item>
            <el-menu-item index="/cost" v-if="urlAvailible('/cost')">Cost</el-menu-item>
        </el-submenu>

        <el-submenu index="mo" v-if="urlAvailible(['/service-stock-out','/service-stock-in','/inventory','/invoice'])">
            <template slot="title">
                <i class="el-icon-document"/>
                <span slot="title">SP morrowali</span>
            </template>
            <el-menu-item index="/service-stock-out" v-if="urlAvailible('/service-stock-out')">Stock out</el-menu-item>
            <el-menu-item index="/service-stock-in" v-if="urlAvailible('/service-stock-in')">Stock in</el-menu-item>
            <el-menu-item index="/inventory">
                Inventory
            </el-menu-item>
            <el-menu-item index="/invoice" v-if="urlAvailible('/invoice')">Invoice</el-menu-item>
        </el-submenu>

        <el-submenu index="export" v-if="urlAvailible(['/export'])">
            <template slot="title">
                <i class="el-icon-tickets"></i>
                <span slot="title">Export</span>
            </template>
            <el-menu-item index="/export" v-if="urlAvailible('/export')">
                Export Management
            </el-menu-item>
        </el-submenu>

        <el-submenu index="import" v-if="urlAvailible(['/import'])">
            <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">Import</span>
            </template>
            <el-menu-item index="/import" v-if="urlAvailible('/import')">
                Import Management
            </el-menu-item>
        </el-submenu>

        <el-submenu index="stock in" v-if="urlAvailible(['/stock-in-list','/stock-in'])">
            <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">Stock in</span>
            </template>
            <el-menu-item index="/stock-in-list" v-if="urlAvailible('/stock-in-list')">
                Stock In List
            </el-menu-item>
            <el-menu-item index="/stock-in" v-if="urlAvailible('/stock-in')">
                Stock In
            </el-menu-item>
        </el-submenu>

        <el-submenu index="storage" v-if="urlAvailible(['/storage'])">
            <template slot="title">
                <i class="el-icon-view"></i>
                <span slot="title">Storage</span>
            </template>
            <el-menu-item index="/storage" v-if="urlAvailible('/storage')">
                Storage
            </el-menu-item>
        </el-submenu>

        <el-submenu index="stock out" v-if="urlAvailible(['/stock-out'])">
            <template slot="title">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">Stock out</span>
            </template>
            <el-menu-item index="/stock-out" v-if="urlAvailible('/stock-out')">
                Stock out
            </el-menu-item>
        </el-submenu>

        <el-submenu index="spare part" v-if="urlAvailible('/part-list')">
            <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">Sparepart Database</span>
            </template>
            <el-menu-item index="/part-list">
                Sparepart Database
            </el-menu-item>
        </el-submenu>


        <el-submenu index="shanqi" v-if="urlAvailible(['/shanqi/consignment','/shanqi/export','/shanqi/import','/shanqi/stockin','/shanqi/stockout','/shanqi/inventory'])">
            <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">陕汽</span>
            </template>
            <el-menu-item index="/shanqi/consignment" v-if="urlAvailible('/shanqi/consignment')">
                寄售合同
            </el-menu-item>
            <el-menu-item index="/shanqi/export" v-if="urlAvailible('/shanqi/export')">
                出口
            </el-menu-item>
            <el-menu-item index="/shanqi/import" v-if="urlAvailible('/shanqi/import')">
                进口
            </el-menu-item>
            <el-menu-item index="/shanqi/stockin" v-if="urlAvailible('/shanqi/stockin')">
                入库
            </el-menu-item>
            <el-menu-item index="/shanqi/stockout" v-if="urlAvailible('/shanqi/stockout')">
                出库
            </el-menu-item>
            <el-menu-item index="/shanqi/inventory" v-if="urlAvailible('/shanqi/inventory')">
                在库
            </el-menu-item>
        </el-submenu>
        <!--<el-submenu index="unit" v-if="urlAvailible(['/unit-list','/unit-option','/property','/unit-type','/unit-field','/unit-option'])">-->
            <!--<template slot="title">-->
                <!--<i class="el-icon-setting"></i>-->
                <!--<span slot="title">Unit Database</span>-->
            <!--</template>-->
            <!--<el-menu-item index="/property" v-if="urlAvailible('/property')">-->
                <!--Unit Property-->
            <!--</el-menu-item>-->
            <!--<el-menu-item index="/unit-type" v-if="urlAvailible('/unit-type')">-->
                <!--Unit Type-->
            <!--</el-menu-item>-->
            <!--<el-menu-item index="/unit-list" v-if="urlAvailible('/unit-list')">-->
                <!--Unit List-->
            <!--</el-menu-item>-->
            <!--<el-menu-item index="/unit-field" v-if="urlAvailible('/unit-field')">-->
                <!--Unit Field-->
            <!--</el-menu-item>-->
            <!--<el-menu-item index="/unit-option" v-if="urlAvailible('/unit-option')">-->
                <!--Unit Option List-->
            <!--</el-menu-item>-->
        <!--</el-submenu>-->

        <el-submenu index="information" v-if="urlAvailible(['/employee','/customer','/sys-customer','/warehouse'])">
            <template slot="title">
                <i class="el-icon-message"></i>
                <span slot="title">Information</span>
            </template>
            <el-menu-item index="/employee" v-if="urlAvailible('/employee')">Employee</el-menu-item>
            <!--<el-menu-item index="/customer" v-if="urlAvailible('/customer')">Customer</el-menu-item>-->
            <el-menu-item index="/sys-customer" v-if="urlAvailible('/sys-customer')">System Customer</el-menu-item>
            <el-menu-item index="/warehouse" v-if="urlAvailible('/warehouse')">Warehouse</el-menu-item>
        </el-submenu>

        <el-submenu index="auth" v-if="urlAvailible(['/user-manage','/role-manage','/auth-manage'])">
            <template slot="title">
                <i class="el-icon-star-on"></i>
                <span slot="title">Authority</span>
            </template>
            <el-menu-item index="/user-manage" v-if="urlAvailible('/user-manage')">
                User Manage
            </el-menu-item>
            <el-menu-item index="/role-manage" v-if="urlAvailible('/role-manage')">
                Role Manage
            </el-menu-item>
            <el-menu-item index="/auth-manage" v-if="urlAvailible('/auth-manage')">
                Authority Manage
            </el-menu-item>
        </el-submenu>
    </el-menu>

</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: "mymenu",
        data(){
            let auth = localStorage.getItem('auth') !== 'undefined' ? localStorage.getItem('auth') : '[]';
            let userInfo = localStorage.getItem('userInfo') !== 'undefined' ? localStorage.getItem('userInfo') : '{}';
            return {
                localAuth: JSON.parse(auth) || [],
                localUser: JSON.parse(userInfo) || {}
            }
        },
        computed: {
            ...mapGetters(['isCollapsed','auth','user'])
        },
        mounted(){
            if(!this.user && this.localUser) {
                this.$router.replace('/');
            }
        },
        methods:{
            urlAvailible(url) {
                const auth =  this.auth && this.auth.menu ? this.auth : this.localAuth;  // 先从store中获取权限信息保证是实时的，如果页面刷新则采用localstorage中的数据
                if(auth && auth.menu){
                    return auth.menu.some(menu=>{
                        return  url.indexOf(menu.url) > -1
                    })
                } else {
                    return false
                }

            }
        },
        watch: {
            $route(router) {
                if (this.$refs.menu.activeIndex) {
                    this.$refs.menu.activeIndex = router.path
                }
            },
            auth(){
                this.$forceUpdate();
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-menu {
        border-right: none;
    }
</style>